<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/zk_sign_in.css">
</head>
<body>
    <header>
        <div class="header_box">
            <div class="logo">
                <a href="zk_home.html"><img src="../img/zk_icon_10.png" alt=""></a>
                <p>中关村在线旗下导购平台</p>
            </div>
            <div class="register_bar">
                <a href="/html/zk_sign.html">立即登录</a>
                已经有值买账号？
            </div>
        </div>
    </header>
    <main>
        <div class="title">30秒快速注册，加入值买</div>
        <form action="">
            <div class="main_box">
                <ul>
                    <li>
                        <span>邮箱注册</span>
                    </li>
                </ul>
                <div class="form_box">
                    <div class="input_box">
                        <p class="label"><i>*</i>邮箱号：</p>
                        <input type="text" id="mailbox">
                        <i class="yes"></i>
                        <i class="no">请填写邮箱号码</i>
                        <p class="tips">请填写邮箱号</p>
                    </div>
                    <div class="input_box">
                        <p class="label"><i>*</i>密码：</p>
                        <input type="password" id="password">
                        <i class="yes"></i>
                        <i class="no">请填写密码</i>
                        <p class="tips">6-16位字母和数字的组合，不可用特殊字符</p>
                    </div>
                    <div class="input_box">
                        <p class="label"><i>*</i>确认密码：</p>
                        <input type="password" id="auto_password">
                        <i class="yes"></i>
                        <i class="no">请填写确认密码</i>
                        <p class="tips">再次输入密码</p>
                    </div>
                    <p class="agreement">
                        <input type="checkbox" id="agree" checked> 同意
                        <a href="http://help.zol.com/index.php?c=Detail&amp;id=1019">《商城用户协议》</a>
                        <a href="http://help.zol.com/index.php?c=Detail&amp;id=1022">《隐私权说明》</a>
                    </p>
                    <button id="submission">注册</button>
                </div>
            </div>
        </form>
    </main>
    <footer>
        <div class="footer_box">
            <div class="foot_left">
                <a href="http://www.rongroad.com">关于Z商城</a>|
                <a href="http://www.rongroad.com">联系我们</a>|
                <a href="http://www.rongroad.com">帮助中心</a>
            </div>
            <div class="foot_righ">
                ©2020. 中关村在线 版权所有
            </div>
        </div>
    </footer>
</body>
<script>
    var f_dom = document.querySelector("div.form_box");
    var dom_arr = f_dom.getElementsByTagName("input");
    var button = document.getElementById("submission")
    var whole = { mailbox: false, password: false, auto_password: false };
    Array.prototype.forEach.call(dom_arr, function (item, index) {
        item.onblur = function () {
            animation(if_true(this))
        }
    })
    button.onclick = function (e) {
        e.preventDefault()
        if (document.getElementById("agree").checked) {
            if (submit()) {
                post({ mailbox: dom_arr[0].value, password: dom_arr[1].value, effect: "register" }, function (obj) {
                    var data = JSON.parse(obj)
                    alert(data.data)
                })
            }
        } else {
            alert("请先同意条款.")
        }
    }
    function submit() {
        for (var item in whole) {
            if (!whole[item]) {
                alert("请认真填写")
                return false;
            }
        }
        return true;
    }
    function post(obj, fun) {
        var kopy = "";
        for (var item in obj) {
            kopy += `${item}=${obj[item]}&`
        }
        var xrt = new XMLHttpRequest();
        xrt.open("post", "/php/hom_ko.php");
        xrt.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xrt.send(kopy)
        xrt.onreadystatechange = function () {
            if (xrt.readyState == 4) {
                fun(xrt.responseText)
            }
        }
    }
    function if_true(zhis) {
        var z_obj = {
            mailbox: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/,
            password: /^(\w){6,10}$/
        }
        try {
            whole[zhis.id] = z_obj[zhis.id].test(zhis.value);
            zhis.id == "password" ? auto() : null;
        } catch (e) {
            if (zhis.id == "auto_password") {
                auto()
            }
        }
        function auto() {
            if (f_dom.querySelector("#auto_password").value === f_dom.querySelector("#password").value
                && f_dom.querySelector("#auto_password").value != "") {
                whole["auto_password"] = true;
                animation(f_dom.querySelector("#auto_password"))
            } else {
                whole["auto_password"] = false;
                animation(f_dom.querySelector("#auto_password"))
            }
        }
        return zhis
    }
    function animation(zhis) {
        var f_box = dom_arr[zhis.id].parentNode
        if (whole[zhis.id] != false && whole[zhis.id] != undefined) {
            f_box.querySelector(".no").style.display = "none";
            f_box.querySelector(".yes").style.display = "block";
        } else if (whole[zhis.id] != undefined) {
            f_box.querySelector(".yes").style.display = "none";
            f_box.querySelector(".no").style.display = "block";
        }
    }
</script>
</html>